<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <p>{{doubleCount}}</p>
        <p>{{fullName}}</p>
      <input type="text" v-model="fullName.firstName" name="" id="" />
      <input type="text" v-model="count"> 
      <h1>{{csgo}}</h1>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            fullName: {
              firstName: "wang",
           
            },
            count:2,
            csgo:{
                c5:"boom",
                guns:"ak47"
            }
          };
        },
        computed: {
          //   fullName: {
          //     get() {
          //       console.log("get方法获取了属性值");
          //       return this.firstName + this.lastName;
          //       console.log("get方法");
          //     },
          //     set(value) {
          //       this.firstName = value.split(",")[0];
          //       this.lasttName = value.split(",")[1];
          //       console.log("设置新的value", value);
          //       return this.firstName + this.lastName;
          //     },
          //   },
          doubleCount() {
            return this.count * 2;
          },
        },

        watch: {
        
            count:{
            immediate: true,
            deep: true,
            handler(newVal, oldVal) {
              console.log("窃听风暴", newVal, oldVal);
            },
          },
         'fullName.firstName'(newVal, oldVal){
           
              console.log("窃听风暴1",newVal, oldVal);
            
          }
        },
      });
    </script>
  </body>
</html>
